<template>
  <a-popover v-model:open="visible" :title="title" trigger="click" placement="bottom" style="width: 100%">
    <template #content>
      <JVxeTable
        id="JSelectTable"
        keep-source
        resizable
        ref="JSelectTableRef"
        :loading="JSelectTableTable.loading"
        :columns="JSelectTableTable.columns"
        :dataSource="JSelectTableTable.dataSource"
        :rowNumber="false"
        :rowSelection="true"
        :toolbar="false"
        :toolbarConfig="toolbarConfig"
      />
    </template>
    <a-input v-model:value="inputValue" readonly @click="show" @change="handleChange" />
  </a-popover>
</template>
<script lang="ts" setup>
  import { defineProps, PropType, reactive, ref, watch } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { JVxeTable } from '@/components/jeecg/JVxeTable';
  import { JVxeTypes } from '@/components/jeecg/JVxeTable/src/types';
  import { isFunction } from '@/utils/is';
  const visible = ref<boolean>(false);
  const inputValue = ref<any>();
  const vxeColumns = ref<any>([]);
  const JSelectTableRef = ref();
  // 工具栏的按钮配置
  const toolbarConfig = reactive({
    // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
    btn: [],
  });
  const JSelectTableTable = reactive({
    loading: false,
    dataSource: [],
    columns: vxeColumns,
  });
  const emit = defineEmits(['register', 'success', 'change', 'update:value']);
  type OptionsItem = { label: string; value: string; disabled?: boolean };
  const props = defineProps({
    value: [Array, Object, String, Number],
    api: {
      type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
      default: null,
    },
    // api params
    params: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
    isPage: propTypes.bool.def(false),
    searchField: propTypes.string.def(''),
    fieldConfig: propTypes.array.def([]),
    valueField: propTypes.string.def('id'),
    title: propTypes.string.def(''),
  });

  const show = () => {
    visible.value = true;
    // 重新加载字段信息
    vxeColumns.value = [
      {
        title: 'id',
        key: 'id',
        type: JVxeTypes.normal,
        visible: false,
      },
    ];
    props.fieldConfig.forEach((item) => {
      vxeColumns.value.push({
        title: item.label,
        key: item.value,
        type: JVxeTypes.normal,
        width: item.width ? item.width : 100,
        visible: item.visible !== null && item.visible !== undefined ? item.visible : true,
      });
    });
    // loadApi();
  };

  /**
   * 加载接口
   */
  async function loadApi() {
    const api = props.api;
    if (!api || !isFunction(api)) return;
    let searchFrom = {
      ...props.params,
    };
    try {
      JSelectTableTable.loading = true;
      const res = await api(searchFrom);
      JSelectTableTable.dataSource = res;
    } catch (error) {
      console.warn(error);
    } finally {
      JSelectTableTable.loading = false;
    }
  }

  //监听value变化
  watch(
    () => props.value,
    (val) => {
      inputValue.value = val;
    },
    { immediate: true }
  );
  /**
   * change事件
   * @param e
   */
  function handleChange(e) {
    let value = e.target.value;
    emit('update:value', value);
    emit('change', value);
  }
</script>
